<!--
  * 时间：2024/11/27
  * 作者：刘岩
  * 描述：年度区间组件
-->
<template>
  <div class="year-range-picker">
    <el-date-picker
      v-model="startYear"
      type="year"
      placeholder="选择开始年"
      size="mini"
      class="year-picker"
      @change="changeStartYear"
      format="yyyy 年"
      value-format="yyyy"
      :clearable="false"
    >
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker
      v-model="endYear"
      type="year"
      placeholder="选择结束年"
      size="mini"
      class="year-picker"
      @change="changeEndYear"
      format="yyyy 年"
      value-format="yyyy"
      :clearable="false"
    >
    </el-date-picker>
  </div>
</template>


<script>
export default {
  name: "YearRangePicker",
  // 接收父组件传入的数据
  props: {
    yearRange: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      startYear: "",
      endYear: "",
    };
  },
  mounted() {
    // 初始化自身变量
    this.startYear = String(this.yearRange[0]);
    this.endYear = String(this.yearRange[1]);
  },
  methods: {
    changeStartYear(val) {
      // 开始年份大于结束年份，调换
      if (Number(this.startYear) > Number(this.endYear)) {
        this.startYear = this.endYear;
        this.endYear = val;
      }
      // 将改动传回父组件
      this.$emit("yearChanged", [this.$dayjs(this.startYear).format('YYYY'), this.$dayjs(this.endYear).format('YYYY')]);
    },
    changeEndYear(val) {
      if (Number(this.startYear) > Number(this.endYear)) {
        this.endYear = this.startYear;
        this.startYear = val;
      }
      this.$emit("yearChanged", [this.$dayjs(this.startYear).format('YYYY'), this.$dayjs(this.endYear).format('YYYY')])
    },
  },
};
</script>


<style scoped lang="scss">
.year-range-picker {
  color: black;
  text-align: center;
  font-size: 18px;
}

.range-word {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 14px;
}

.year-range-picker .year-picker {
  width: 215px;
  ::v-deep .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
</style>
